<template>
	<div id="VotePrize">
		<!--<x-header :left-options="{showBack: false}" title='“公益鉴宝”藏品入围评选活动' class="header">
			<a slot="left"><i class="pm-icon ic-close"></i></a>
		</x-header>-->
		<div class="prize-top" :style="note"></div>
		<div class="prize-bottom">
			<ul class="bar-list">
				<li>
					<p class="number">{{details.item_count}}</p>
					<p class="text">参赛藏品</p>
				</li>
				<li>
					<p class="number">{{details.ticket_count * multiple}}</p>
					<p class="text">累计投票</p>
				</li>
				<li>
					<p class="number">{{details.vote_vcount}}</p>
					<p class="text">总访问量</p>
				</li>
			</ul>
			<div class="info-content">
				<div class="info-item">
					<p class="prize-detail-title" :style="titles">入围奖品</p>
					<div class="prize-list">
						<div class="prize-item">
							<img src="../assets/images/home/prize_special.png" />
							<p class="title">特等奖（1名）</p>
							<p class="desc">价值8316元iphoneX一台+免费鉴定资格</p>
						</div>
						<div class="prize-item">
							<img src="../assets/images/home/prize_one.png" />
							<p class="title">一等奖（2名）</p>
							<p class="desc">价值1888元天然和田玉佩“龙凤祥和”+免费鉴定资格</p>
						</div>
						<div class="prize-item small">
							<img src="../assets/images/home/prize_two.png" />
							<p class="title">二等奖（6名）</p>
							<p class="desc">价值378元海南星月菩提子“鸿运当头”108颗+免费鉴定资格</p>
						</div>
						<div class="prize-item small">
							<img src="../assets/images/home/prize_three.png" />
							<p class="title">三等奖（10名）</p>
							<p class="desc">价值218元天然红石榴石手链+免费鉴定资格</p>
						</div>
						<div class="prize-item small">
							<img src="../assets/images/home/prize_competition.png" />
							<p class="title">入围奖（30名）</p>
							<p class="desc">价值99元紫檀招财貔貅挂件+免费鉴定资格</p>
						</div>
					</div>
				</div>

				<div class="info-item">
					<p class="prize-detail-title" :style="titles">投票抽奖奖品</p>
					<ul class="vprize-list">
						<li>
							<img src="../assets/images/home/active_rule_prize1.png" />
							<p class="title">粉玉髓</p>
							<p class="desc">9.9元包邮</p>
						</li>
						<li>
							<img src="../assets/images/home/active_rule_prize2.png" />
							<p class="title">星月菩提</p>
							<p class="desc">免费领取</p>
						</li>
						<li>
							<img src="../assets/images/home/active_rule_prize3.png" />
							<p class="title">黑玛瑙</p>
							<p class="desc">12.9元包邮</p>
						</li>
					</ul>
					<ul class="vprize-list">
						<li>
							<img src="../assets/images/home/active_rule_prize6.png" />
							<p class="title">朱砂手链</p>
							<p class="desc">免费领取</p>
						</li>
						<li>
							<img src="../assets/images/home/active_rule_prize4.png" />
							<p class="title">红玛瑙</p>
							<p class="desc">13.9元包邮</p>
						</li>
						<li>
							<img src="../assets/images/home/active_rule_prize5.png" />
							<p class="title">迷你小星月</p>
							<p class="desc">免费领取</p>
						</li>

					</ul>
					<a href="#/LuckDraw" class="go-draw">去抽奖</a>
					<p class="draw-desc">每投一次票（对应增加10倍活力值），可抽一次奖</p>
				</div>
				<div class="info-item" v-for="item in infoList">
					<p class="prize-detail-title" :style="titles">{{item.info_title}}</p>
					<div class="item-detail">
						<p v-html="item.info_content"></p>
					</div>
				</div>
			</div>
			<div class="vote-copy">
				<p>本次活动最终解释权归郑州宋唐电子商务有限公司所有</p>
			</div>
		</div>
		<bottom></bottom>
	</div>
</template>

<script>
	import bottom from './ActiveFooter'
	import $ from 'jquery';
	import axios from 'axios';
	import { XHeader } from 'vux';

	export default {
		data() {
			return {
				infoList: [],
				vote_id: '1',
				multiple: '10',
				details: '',
				note: {
					backgroundImage: "url(" + require("../assets/images/home/active_top_intro.png") + ")",
					backgroundRepeat: "no-repeat",
					backgroundSize: "100% 100%",
				},
				titles: {
					backgroundImage: "url(" + require("../assets/images/home/prize_title_bg.png") + ")",
					backgroundRepeat: "no-repeat",
					backgroundSize: "100% 100%"
				}

			}
		},
		components: {
			bottom,
			XHeader
		},

		mounted() {
			this.getVoteDetail();
			this.getLotteryList();
		},
		//方法
		methods: {
			getLotteryList: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/lottery/info_list.json?lottery_id=1'
				}).then((result) => {
					this.infoList = result.data.info_list;
				}).catch((err) => {

				})
			},
			getVoteDetail: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/vote/details.json?vote_id=' + this.vote_id
				}).then((result) => {
					if(result.data.code == 1) {
						this.details = result.data.data;
					}
				}).catch((err) => {

				})
			},
			back: function() {
				window.history.go(-1);
			},
		},
	}
</script>

<style scoped>
	#VotePrize {
		padding-bottom: 1.5rem;
	}
	
	.prize-top {
		width: 100%;
		height: 4.4rem;
	}
	
	.prize-bottom {
		width: 100%;
	}
	
	.prize-bottom .bar-list {
		background-color: #fff;
		display: flex;
	}
	
	.prize-bottom .bar-list li {
		position: relative;
		width: 100%;
		padding: 0.46666rem 0;
		text-align: center;
	}
	
	.prize-bottom .bar-list li p {
		line-height: 1;
	}
	
	.prize-bottom .bar-list li .number {
		padding-bottom: 0.26666rem;
		font-size: 0.48rem;
		color: #d35f5d;
	}
	
	.prize-bottom .bar-list li .text {
		font-size: 0.32rem;
		color: #c1c1c1;
	}
	
	.prize-bottom .bar-list li:after {
		content: '';
		position: absolute;
		margin-top: -0.24rem;
		top: 50%;
		right: 0;
		width: 1px;
		height: 0.48rem;
		background-color: #e6e6e6;
	}
	
	.prize-bottom .bar-list li:last-child:after {
		display: none;
	}
	/*详情*/
	
	.info-content {
		padding: 0 0.26666rem;
	}
	
	.info-item {
		margin-top: 0.26666rem;
		padding: 0.26666rem 0;
		border-radius: 0.13333rem;
		background-color: #fff;
	}
	
	.info-item .item-detail {
		padding: 0 0.13333rem;
		font-size: 0.34rem;
	}
	
	.info-item .item-detail p {
		line-height: 1.8;
	}
	
	.prize-list {
		overflow: hidden;
	}
	
	.prize-list .prize-item {
		float: left;
		width: 50%;
		margin: 0 auto;
		text-align: center;
	}
	
	.prize-list .prize-item.small {
		width: 33.33%;
	}
	
	.prize-list .prize-item.small img {
		width: 2.97rem;
		height: 1.73rem;
	}
	
	.prize-list .prize-item img {
		width: 2.37rem;
		height: 2.9rem;
	}
	
	.prize-list .prize-item p {
		text-align: center;
	}
	
	.prize-list .prize-item p.title {
		font-size: 0.37333rem;
	}
	
	.prize-list .prize-item p.desc {
		padding: 0 0.26666rem 0.4rem;
		font-size: 0.32rem;
		color: #666;
		text-align: left;
	}
	/*投票抽奖奖品*/
	
	.vprize-list {
		margin-top: 0.53333rem;
		overflow: hidden;
		display: flex;
	}
	
	.vprize-list li {
		width: 100%;
	}
	
	.vprize-list li p {
		text-align: center;
	}
	
	.vprize-list li img {
		padding: 0 0.13333rem;
		width: 100%;
		border-radius: 50%;
	}
	
	.vprize-list li p.title {
		font-size: 0.37333rem;
	}
	
	.vprize-list li p.desc {
		padding: 0 0.26666rem;
		font-size: 0.32rem;
		color: #666;
	}
	/*去抽奖*/
	
	.go-draw {
		margin: 0.4rem auto;
		width: 2.13333rem;
		height: 0.61333rem;
		line-height: 0.61333rem;
		text-align: center;
		color: #fff;
		font-size: 0.32rem;
		background-color: #eb5959;
		border-radius: 0.37333rem;
		display: block;
	}
	
	.draw-desc {
		color: #c1c1c1;
		text-align: center;
	}
	
	.info-content .info-title {
		padding: 0.13333rem 0;
		text-align: center;
	}
	
	.info-content .info-title h1 {
		padding: 0.13333rem 0;
		font-size: 0.48rem;
	}
	
	.info-content .info-title .info-code {
		padding-bottom: 0.26666rem;
		font-size: 0.34666rem;
		color: #e68f6b;
	}
	
	.info-content .imgs-list {}
	
	.info-content .imgs-list img {
		width: 100%;
		border-radius: 0.13333rem;
		margin-bottom: 0.13333rem;
	}
	/*通用标题*/
	
	.prize-detail-title {
		position: relative;
		margin: 0.26666rem auto;
		width: 3.6rem;
		height: 0.66666rem;
		line-height: 0.66666rem;
		text-align: center;
		font-size: 0.37333rem;
		color: #fff;
		/*background: url(../assets/images/home/prize_title_bg.png) center bottom no-repeat;
		background-size: 100% 100%;*/
	}
	
	.vote-copy {
		padding: 0.53333rem 0;
		text-align: center;
		font-size: 0.29333rem;
		color: #c6c6c6;
	}
</style>